/**
 * 1.点击创建新的位置和大小随机target
 * 2.点击开始，滑动封面，点击圆点切换到level
 * **/
var box = document.querySelector("#box")
console.log(box)
//获取first & start &level
var first = document.querySelector("#first");
var start = document.querySelector("#start");
var level = document.querySelector("#level");
var num = document.querySelector("#number");
var rank = document.querySelector("#rank");
var butRank = document.querySelector("#butRank");

/************** 点击start开始 **************/
start.addEventListener("click",function(){
    //点击start后，隐藏封面
    first.style.display = "none";
    //切换level
    level.style.left = "-100%";
    level.style.transition = "all 0.7s ease-in 0.5s"
})

/********** level页的切换复位 ***********/
//切换level结束后复位
level.addEventListener("transitionend",function(){
    //level复位到右侧
    level.style.transition = "none"
    level.style.left = "100%";
    //创建新的圆
    buildSon();
    flag = true;
    if(i>=2){
        level.style.animation = "toleft 2s "
    }
})
//level的animation结束时
level.addEventListener("animationend",function(){
    level.style.animation = "none"
})
/************* rank的点击事件 **************/
//点击rank按钮
butRank.addEventListener("click",function(){
    rank.style.display = "block"
})
/*********** again的点击事件 **********/
//again的点击事件
again.addEventListener("click",init)
again2.addEventListener("click",init)
//初始化
function init(){
    rank.style.display = "none"
    over.style.display = "none"
    first.style.display = "block"
    num.innerText = "1"
    container.innerHTML=""
    level.style.left = "0px"
    i = 0;
}
/*********** 圆的点击事件的设置 ***********/
var flag = true;
function change(el){
    if(flag == true){
        flag = false;
        var Son = document.querySelectorAll(".buildSon");
        if((i-1) == this.id){
            //number关数加1
            num.innerText = Number(num.innerText) +1;
            //切换level
            level.style.left = "0px";
            level.style.transition = "all 0.7s ease-in 0.5s"
        }else{
            Son[Son.length-1].style.animation = "flash 2s"
            Son[Son.length-1].addEventListener("animationend",function(){
                score.innerText = `score: ${i}`
                over.style.display = "block"
            })
        }
    }
}

/******** 创建新target功能（核心算法） *********/
//获取目标
var box = document.getElementById("box")
var container = document.querySelector("#container");
var i = 0;
//创建储存的数组
var arrD = [], arrX = [], arrY = [];

//创建新圆点功能
function buildSon(){
    //创建随机数
    var d = Math.floor(Math.random()*50+10);//直径d范围（10-50）
    var x = Math.floor(Math.random()*350);//x轴范围（0-350）
    var y = Math.floor(Math.random()*600);//y轴范围（0-600）
    
    //在container中创建新的圆
    container.innerHTML +=`<div class="buildSon" id=${i}><div>`
    var Son = document.getElementsByClassName("buildSon");
    for(let k=0;k<Son.length;k++){
        Son[k].onclick = change;
    }
    
    //检查随机数
    check(d,x,y);
    
    /****** 随机数的限制条件 ******/
    //检查随机数功能
    function check(d,x,y){
        //1.检查出界
        var condition1 = x+d>350||y+d>600;
        //2.检查重叠
        var condition2 = "";
        //新随机出来的d、x、y，与之前的进行逐个对比，发现重叠的，则返回true，并终止遍历
        for(let a = 0 ;a<arrD.length;a++ ){
            if((arrX[a]<x+d)&(x<arrX[a]+arrD[a])&(arrY[a]<y+d)&(y<arrY[a]+arrD[a])){
                condition2 = true;
                a = arrD.length;//终止遍历
            }else{
                condition2 = false;
            }
        }
        if(condition1||condition2){
            //重置随机数
            var d = Math.floor(Math.random()*50+10);//直径d范围（10-60）
            var x = Math.floor(Math.random()*350);//x轴范围（0-350）
            var y = Math.floor(Math.random()*600);//y轴范围（0-600）
            check(d,x,y);
        }else{
            //合格随机数赋值
            Son[i].style.width = d + "px";
            Son[i].style.height = d + "px";
            Son[i].style.left = x +"px";
            Son[i].style.top = y+"px";
            //点击次数累加
            i++;
            //储存
            arrD.push(d);
            arrX.push(x);
            arrY.push(y);
        }
    }
};